<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<html>
<head>
  <title>房屋管理</title>
  <style>
    body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f5f5f5; }
    .header { background-color: #4CAF50; color: white; padding: 15px; text-align: center; }
    .menu { background-color: #333; overflow: hidden; }
    .menu a { float: left; display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }
    .menu a:hover { background-color: #ddd; color: black; }
    .content { padding: 20px; }
    table { width: 100%; border-collapse: collapse; margin-top: 20px; }
    table, th, td { border: 1px solid #ddd; }
    th, td { padding: 12px; text-align: left; }
    th { background-color: #4CAF50; color: white; }
    tr:nth-child(even) { background-color: #f2f2f2; }
    .action-btn { padding: 5px 10px; text-decoration: none; border-radius: 3px; }
    .edit-btn { background-color: #2196F3; color: white; }
    .success { color: green; margin-bottom: 15px; }
    .error { color: red; margin-bottom: 15px; }
    .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); }
    .modal-content { background-color: #fefefe; margin: 10% auto; padding: 20px; border: 1px solid #888; width: 50%; }
    .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; }
    .close:hover { color: black; cursor: pointer; }
    .form-group { margin-bottom: 15px; }
    label { display: block; margin-bottom: 5px; }
    input, select { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
    .form-actions { text-align: right; margin-top: 20px; }
    .form-actions button { padding: 8px 15px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; }
    .form-actions button:hover { background-color: #45a049; }
    .add-btn { display: inline-block; margin-bottom: 20px; padding: 10px 15px; background-color: #4CAF50; color: white; text-decoration: none; border-radius: 3px; }
  </style>
</head>
<body>
<div class="header">
  <h1>社区管理系统 - 房屋管理</h1>
</div>

<div class="menu">
  <a href="../memberHome.jsp">首页</a>
  <a href="houses">楼盘列表</a>
  <a href="households">入住管理</a>
  <a href="serviceStaff">服务管理</a>
  <a href="profile">个人信息</a>
  <a href="logout" class="logout">退出登录</a>
</div>
<div class="content">
  <% if (request.getAttribute("success") != null) { %>
  <div class="success"><%= request.getAttribute("success") %></div>
  <% } %>
  <% if (request.getAttribute("error") != null) { %>
  <div class="error"><%= request.getAttribute("error") %></div>
  <% } %>

  <!-- 修改添加按钮文本 -->
  <a href="#" class="add-btn" onclick="openAddModal()">添加房屋</a>
  <!-- 修正表格列顺序 -->
  <table>
    <thead>
    <tr>
      <th>房屋ID</th>
      <th>楼盘名称</th>
      <th>楼栋号</th>
      <th>单元号</th>
      <th>房号</th>
      <th>面积(㎡)</th>
      <th>价格</th>
      <th>房屋模型图</th>
      <th>状态</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <c:forEach var="house" items="${houses}">
      <tr>
        <td>${house.houseId}</td>
        <td>${house.houseName}</td>
        <td>${house.buildingNumber}</td>
        <td>${house.unitNumber}</td>
        <td>${house.roomNumber}</td>
        <td>${house.area}</td>
        <td>${house.price}</td>
        <td>
          <c:if test="${not empty house.houseImage}">
            <img src="${pageContext.request.contextPath}/${house.houseImage}" width="100" alt="房屋图片">
          </c:if>
          <c:if test="${empty house.houseImage}">
            无图片
          </c:if>
        </td>
        <td>${house.status == 0 ? '可售' : '已售'}</td>
        <td>
          <a href="#" class="action-btn edit-btn" onclick="openEditModal(${house.houseId}, ${house.status}, ${house.buyerId}, ${house.price})">更新状态</a>
        </td>
      </tr>
    </c:forEach>
    </tbody>
  </table>
</div>
<!-- 添加楼房模态框 -->
<div id="addModal" class="modal">
  <div class="modal-content">
    <span class="close" onclick="closeAddModal()">&times;</span>
    <h2>添加房屋信息</h2>
    <form id="addHouseForm" action="addHouse" method="post" enctype="multipart/form-data">
      <input type="hidden" name="action" value="add">

      <div class="form-group">
        <label for="houseName">房屋名称:</label>
        <input type="text" id="houseName" name="houseName" required maxlength="100">
      </div>

      <div class="form-group">
        <label for="buildingNumber">楼栋号:</label>
        <input type="text" id="buildingNumber" name="buildingNumber" required maxlength="20">
      </div>

      <div class="form-group">
        <label for="unitNumber">单元号:</label>
        <input type="text" id="unitNumber" name="unitNumber" required maxlength="20">
      </div>

      <div class="form-group">
        <label for="roomNumber">房间号:</label>
        <input type="text" id="roomNumber" name="roomNumber" required maxlength="20">
      </div>

      <div class="form-group">
        <label for="area">面积(㎡):</label>
        <input type="number" id="area" name="area" required step="0.01" min="0">
      </div>

      <div class="form-group">
        <label for="price">价格(元):</label>
        <input type="number" id="price" name="price" required step="0.01" min="0">
      </div>

      <%--      <div class="form-group">
              <label for="status">状态:</label>
              <select id="status" name="status" required>
                <option value="0">未售</option>
                <option value="1">已售</option>
              </select>
            </div>

            <div class="form-group">
              <label for="buyerId">买家ID:</label>
              <input type="number" id="buyerId" name="buyerId" min="0">
            </div>--%>

      <div class="form-group">
        <label for="house_image">房屋图片:</label>
        <input type="file" id="house_image" name="house_image" accept="image/*">
      </div>

      <div class="form-actions">
        <button type="button" onclick="closeAddModal()">取消</button>
        <button type="submit">保存</button>
      </div>
    </form>
  </div>
</div>
<!--更新房屋状态模态框 -->
<div id="editModal" class="modal">
  <div class="modal-content">
    <span class="close" onclick="closeEditModal()">&times;</span>
    <h2>更新房屋状态</h2>
    <form id="editForm" action="updateHouse" method="post">
      <input type="hidden" id="editHouseId" name="houseId">
      <div class="form-group">
        <label for="editPrice">价格(元):</label>
        <input type="number" id="editPrice" name="price" required step="0.01" min="0">
      </div>
      <div class="form-group">
        <label for="editStatus">状态:</label>
        <select id="editStatus" name="status" onchange="toggleBuyerField()" required>
          <option value="0">可售</option>
          <option value="1">已售</option>
        </select>
      </div>
      <div class="form-group" id="buyerGroup" style="display: none;">
        <label for="editBuyerId">购买会员ID:</label>
        <input type="number" id="editBuyerId" name="buyerId" required>
      </div>
      <div class="form-actions">
        <button type="button" onclick="closeEditModal()">取消</button>
        <button type="submit">保存</button>
      </div>
    </form>
  </div>
</div>

<script>
  function openAddModal() {
    document.getElementById('addModal').style.display = 'block';
  }

  function closeAddModal() {
    document.getElementById('addModal').style.display = 'none';
  }

  // 编辑房屋模态框控制
  function openEditModal(houseId, status, buyerId, price) {
    document.getElementById('editHouseId').value = houseId;
    document.getElementById('editStatus').value = status;
    document.getElementById('editBuyerId').value = buyerId || '';
    document.getElementById('editPrice').value = price;
    if (status == 1) {
      document.getElementById('buyerGroup').style.display = 'block';
    } else {
      document.getElementById('buyerGroup').style.display = 'none';
    }

    document.getElementById('editModal').style.display = 'block';
  }

  function closeEditModal() {
    document.getElementById('editModal').style.display = 'none';
  }

  function toggleBuyerField() {
    var status = document.getElementById('editStatus').value;
    if (status == 1) {
      document.getElementById('buyerGroup').style.display = 'block';
    } else {
      document.getElementById('buyerGroup').style.display = 'none';
    }
  }

  // 点击模态框外部关闭模态框
  window.onclick = function(event) {
    if (event.target == document.getElementById('addModal')) {
      closeAddModal();
    }
    if (event.target == document.getElementById('editModal')) {
      closeEditModal();
    }
  }
</script>
</body>
</html>